@import "./variables.scss";
@import "./mixins.scss";
@import "./common.scss";
@import "./ripple.scss";

// ===================== 全局动画 =====================
// 页面 X 平移动画
.page-x-enter-active, .page-x-leave-active {
  transition: .4s all;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.page-x-enter-from {
  opacity: 0;
  transform: translate3d(30px, 0 0);
}

.page-x-leave-to {
  opacity: 0;
  transform: translate3d(-30px, 0, 0);
}

// 页面 Y 平移动画
.page-y-enter-active, .page-y-leave-active {
  transition: .4s all;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.page-y-enter-from {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}

.page-y-leave-to {
  opacity: 0;
  transform: translate3d(0, -30px, 0);
}

// 面包屑
.breadcrumb-enter-active, .breadcrumb-leave-active {
  transition: .4s all;
}

.breadcrumb-enter-from, .breadcrumb-leave-to {
  opacity: 0;
  transform: translate3d(20px, 0, 0);
}

.breadcrumb-leave-to {
  position: absolute;
}

// 渐变
.fade-enter-active, .fade-leave-active {
  transition: var(--transition);
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

// ================= TODO: 示例全局样式，可随意删除，不影响依赖样式 =================

.the-input {
  width: 100%;
  border: 1px solid #DCDFE6;
  border-radius: var(--border-radius);
  color: #1f2d3d;
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  padding: 0 15px;
  outline: none;
  transition: 0.2s all;

  &:focus {
    border-color: var(--blue);
  }

  &::placeholder {
    color: #999;
  }
}

.the-btn {
  font-size: 14px;
  padding: 0px 15px;
  min-width: 88px;
  height: 36px;
  line-height: 1;
  border-radius: var(--border-radius);
  background-color: #fff;
  color: rgba(0,0,0,.87);
  box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);
  transition: var(--transition);
  outline: none;
  text-align: center;
  border: none;
  cursor: pointer;
  &:active {
    box-shadow: 0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12);
  }
  &:disabled {
    cursor: no-drop;
    opacity: 0.7;
  }
}

.the-btn + .the-btn {
  margin-left: 10px;
}

.the-btn.mini {
  font-size: 12px;
  height: 28px;
  border-radius: var(--border-radius);
}

.the-btn.blue {
  background-color: var(--blue);
  color: #fff;
}

.the-btn.green {
  background-color: var(--green);
  color: #fff;
}

.the-btn.yellow {
  background-color: var(--yellow);
  color: #fff;
}

.the-btn.red {
  background-color: var(--red);
  color: #fff;
}

.the-tag {
  display: inline-block;
  padding: 6px 8px;
  border-radius: var(--border-radius);
  line-height: 1;
  font-size: 14px;
}

.the-tag + .the-tag {
  margin-left: 10px;
}

.the-tag.green { @include tag-color(#e7faf0, var(--green)); }
.the-tag.blue { @include tag-color(#e8f3ff, var(--blue)); }
.the-tag.gray { @include tag-color(#efefef, var(--gray)); }
.the-tag.red { @include tag-color(#ffeded, var(--red)); }
.the-tag.orange { @include tag-color(#fff7e6, var(--orange)); }
.the-tag.purple { @include tag-color(#f9f0ff, var(--purple)); }
.the-tag.cyan { @include tag-color(#e6fffb, var(--cyan)); }

.the-title {
  letter-spacing: 3px;
  line-height: 24px;
  font-size: 18px;
  color: rgb(255, 255, 255);
  text-shadow: var(--text-shadow-bg) 1px 1px, var(--text-shadow-bg) 1px -1px, var(--text-shadow-bg) -1px 1px, var(--text-shadow-bg) -1px -1px, var(--text-shadow-bg) 0px 1.4px, var(--text-shadow-bg) 0px -1.4px, var(--text-shadow-bg) -1.4px 0px, var(--text-shadow-bg) 1.4px 0px, var(--text-shadow-color) 2px 2px, var(--text-shadow-color) 3px 3px, var(--text-shadow-color) 3px 1px, var(--text-shadow-color) 1px 3px, var(--text-shadow-color) 1px 1px, var(--text-shadow-color) 2px 3.4px, var(--text-shadow-color) 2px 0.6px, var(--text-shadow-color) 0.6px 2px, var(--text-shadow-color) 3.4px 2px;
  box-sizing: border-box;
  font-style: italic;
  &.is-line {
    display: inline-block;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #888;
    }
  }
}
